<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<script type="text/javascript" src="lib/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="lib/moment.min.js"></script>
<script type="text/javascript" src="DatePicker.js"></script>
<script type="text/javascript" src="Calendar.js"></script>

<link href="trak.css" rel="stylesheet" type="text/css">
<style>
	#right, #center{
		float: right;
	}
	#right{
		width: 250px;
	}
	#sum{
		margin-top: 50px;
	}
	#weekdata, #monthdata{
		color: #4F004F;
	}
	#bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 59px;
		background-color: #ddd;
		border-top: 1px solid #dde;
	}
</style>
</head>
<body>
	<div id="top">
		<div id="logo">
			<span>Tasktracker</span>
		</div>
		<div id="menu">
			<a href="#">Login</a>
			<a href="#">Home</a>
		</div>
	</div>
	<div id="right">
		<div id='dp'></div>
		<div id='sum' class="dp-wrap">
			<div class="dp-head">
				In server's time zone
			</div>
			<table style="width:100%">
				<tr height="30">
					<td>Hours of This Week:</td>
					<td id="weekdata"></td>
				</tr>
				<tr height="30">
					<td>Hours of Last Week:</td>
					<td id="lastweek"></td>
				</tr>
				<tr height="30">
					<td>Hours of This Month:</td>
					<td id="monthdata"></td>
				</tr>
				<tr height="30">
					<td>Hours of Last Month:</td>
					<td id="lastmonth"></td>
				</tr>
			</table>
		</div>
	</div>
	<div id="center"></div>
	<div id="bottom"></div>
</body>

<script>
	var taskId = 1;
	var dp = new DatePicker($("#dp")); //width = 250
	var win = $(window);
	var cal = new Calendar($("#center"), 
			taskId, 
			win.width() - 252, 
			win.height() - 70 - 60 - 5);
	dp.setSelectHandler(function(date){
		cal.setDay(date);
	});
	$.get("/traktask/cal/seconds", {
		taskId: taskId
	}, function(data){
		$('#weekdata').text((data[0] / 3600).toFixed(1));
		$('#lastweek').text((data[1] / 3600).toFixed(1));
		$('#monthdata').text((data[2] / 3600).toFixed(1));
		$('#lastmonth').text((data[3] / 3600).toFixed(1));
	}, 'json');
//	win.resize(function(){cal.resize(win.width() - 252 - 10, win.height() - 70 - 60 - 5)});
</script>
</html>